<template>
  <div class="GdAreaSelect-root">
    <el-cascader
      v-bind="$attrs"
      v-model="areaValue"
      size="mideum"
      :options="areaTreeOptions"
      clearable
      @change="changeArea"
    ></el-cascader>
  </div>
</template>

<script>
import { getAreaTree } from "@/api/system/area";

export default {
  name: "GdAreaSelect",
  components: {},
  props: {
    value: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      areaTreeOptions: [],
      areaTreeList: [],
      areaValue: [],
    };
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        this.areaValue = newVal;
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.getAreaTreeInfo();
  },
  methods: {
    getAreaTreeInfo() {
      let tempAreaCode = this.$store.state.account.user.deptIds;
      let  parentCode = '440000000000'
      if(tempAreaCode!=''){
        if(tempAreaCode.length==2){
          parentCode=tempAreaCode+"0000000000"
        }else if(tempAreaCode.length==4){
          parentCode=tempAreaCode+"00000000"
        }else if(tempAreaCode.length==6){
          parentCode=tempAreaCode+"000000"
        }else if(tempAreaCode.length==8){
          parentCode=tempAreaCode+"0000"
        }

      }
      getAreaTree({ parentCode: parentCode }).then((res) => {
        if (res.code == 200) {
          this.areaTreeOptions = res.data;
          this.areaTreeOptions.forEach(province => {
            province.children.unshift({ label: "全部", value: "" });
            province.children.forEach(city => {
              if(city.children){
                city.children.unshift({ label: "全部", value: "" });
              }
            })
          });
        }
      });
    },
    changeArea(val) {
      // console.log(val);
      while (val.length < 3) {
        val.push("");
      }
      this.$emit("input", val);
      this.$emit("changeGdArea", val);
    },
  },
};
</script>

<style lang="scss" scoped>
.GdAreaSelect-root {
}
::v-deep .el-cascader{
  width: 100%;
}
</style>
